<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page isELIgnored="false"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!-- 页面是响应式页面，在使用c:foreach标签输出各个宠物时会出现排版错乱，这是由于使用col-md-12之后溢出的列数是处于漂浮状态float，通过浏览器调试可以看到，
	boostrap的网格系统基于漂浮定位等基础，所以需要在输出指定列数之后再输出一个col-md-12进行排版具体看c:foreach处代码
	注：c:foreach 中varstaus的index属性是从0开始，count属性是从1开始，current可获得当且迭代对象 -->
<!DOCTYPE html>
<html lang="en">
<!-- base标签为页面上的所有链接规定默认地址或默认目标 -->
<base href="<%=basePath%>">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/search-result.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-paginator.min.js"></script>
<script src="js/search-result.js"></script>
<script src="js/header.js"></script>
</head>
<body>
	<div id="box">
		<div id="header">
		<jsp:include page="common/header.jsp" flush="true" /> 
			<!-- nav导航栏
			<nav class="navbar navbar-inverse  navbar-fixed-top"
				role="navigation">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#a">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>

				</button>
				<div class="container-fluid">
					<div class="navbar-header">
						<a class="navbar-brand" href="#">PETCLUB</a>
					</div>
					<div>
						<ul class="nav navbar-nav collapse navbar-collapse" id="a">
							<li class="active"><a href="#">首页</a></li>
							<li><a href="#">市场</a></li>
							<li><a href="#">论坛</a></li>
							<li><a href="#">我的家园</a></li>
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								data-toggle="dropdown"> <i class="glyphicon glyphicon-user"></i>
									个人中心 <b class="caret"></b>
							</a>
								<ul class="dropdown-menu" style="background-color: ghostwhite">
									<li class="" style=""><a href="#"><i
											class="glyphicon glyphicon-log-in"></i>&nbsp;&nbsp;登录</a></li>
									<li class="divider"></li>
									<li class="" style=""><a href="#"><i
											class="glyphicon glyphicon-registration-mark"></i>&nbsp;&nbsp;登录</a>
									</li>
								</ul></li>
						</ul>


					</div>
				</div>
			</nav> -->
			<!--附加导航栏-->
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-3" style="">
						<a href="index.html" style="padding: 0 21%" class=""><img
							src="images/PETCLUB2.png" alt=""></a>
					</div>
					<div class="col-md-9" style="">
						<!-- <div class="form-group" style="position: absolute;top:50%;transform:translateY(-50%); ">
                         <input class="search" type="text" list="list" name="search" title="I am looking for..."
                                value="I am looking for... " style="width: 350px">
                         <input type="submit" name="submit">
                     </div>-->
						<div class="input-group" style="width: 60%; padding: 1.2%">
							<input class="form-control searchInput" type="text" list="list"
								placeholder="I am looking for..."> <span
								class="input-group-btn">
								<button class="btn btn-default searchBtn" type="submit">
									<i class="glyphicon glyphicon-search"></i>
								</button>
							</span>
						</div>
						<datalist id="list">
							<option>宠物猫</option>
							<option>宠物狗</option>
						</datalist>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="panel panel-info">
				<div class="panel-heading">
					<p>
						<i class="glyphicon glyphicon-gift"></i>搜索结果
					</p>
				</div>

				<div class="panel-body">
					<div class="row">
						<div class="col-md-12" style="padding-top: 0%">
							<!-- <ul class="list-inline well">
								<li class="glyphicon glyphicon-export">分类：</li>
								<li>波斯猫</li>
								<li>波斯猫</li>
								<li>波斯猫</li>
								<li>波斯猫</li>
								<li>波斯猫</li>
							</ul> -->
							<ul class="nav nav-tabs " style="border-top: 1px solid gainsboro">
								<li class="active"><a href="#">默认</a></li>
								<!-- <li><a href="#" class="hot">热度<i
										class="glyphicon glyphicon-arrow-down"
										style="font-size: smaller"></i></a></li>
								<li><a href="#">发布时间<i
										class="glyphicon glyphicon-arrow-down"
										style="font-size: smaller"></i></a></li> -->
							</ul>
							<div class="well col-md-12" style="background: whitesmoke">
								<c:forEach items="${itemList}" var="item" varStatus="status">
									<%-- 	<tr>
										<td>${key.id}</td>
										<td>${key.name }</td>
										<td>${key.introduction }</td>
										<td><button dataid="${key.id }"
												class="btn btn-primary btn-xs hanblog_edit">修改</button>
											<button dataid="${key.id }"
												class="btn btn-primary btn-danger btn-xs hanblog_delete">删除</button></td>
									</tr> --%>
									<c:if test="${status.index==0}">
										<div class="col-md-12">
									</c:if>
									<c:if test="${status.index!=0&&(status.index%4==0)}">
									</div>
									<div class=col-md-12>
									</c:if>
									<dl class="col-md-3">
										<div style="padding-left: 0; border: 1px solid gainsboro">
											<dt style="padding-top: 0%; border: 1px solid silver">
												<a href="item/${item.id}.html"><img src="${item.image}"
													alt="" style=""></a>
											</dt>
											<dd>
												<a href="item/${item.id }.html">名字：${item.name}</a>
											</dd>
											<dd>类别：${item.category_name}</dd>
											<dd>标题：${item.title}</dd>
										</div>
									</dl>
								</c:forEach>
								<!-- 					<dl class="col-md-3">

									<div style="padding-left: 0; border: 1px solid gainsboro">
										<dt style="padding-top: 0%; border: 1px solid silver">
											<img src="images/dog4sc.jpg" alt="" style="">
										</dt>
										<dd>名字：</dd>
										<dd>类别：</dd>
										<dd>简介：</dd>
									</div>
								</dl>
								<dl class="col-md-3">

									<div style="padding-left: 0; border: 1px solid gainsboro">
										<dt style="padding-top: 0%; border: 1px solid silver">
											<img src="images/dog4sc.jpg" alt="" style="">
										</dt>
										<dd>名字：</dd>
										<dd>类别：</dd>
										<dd>简介：</dd>
									</div>
								</dl>
								<dl class="col-md-3">

									<div style="padding-left: 0; border: 1px solid gainsboro">
										<dt style="padding-top: 0%; border: 1px solid silver">
											<img src="images/dog4sc.jpg" alt="" style="">
										</dt>
										<dd>名字：</dd>
										<dd>类别：</dd>
										<dd>简介：</dd>
									</div>
								</dl>
								<dl class="col-md-3">

									<div style="padding-left: 0; border: 1px solid gainsboro">
										<dt style="padding-top: 0%; border: 1px solid silver">
											<img src="images/dog4sc.jpg" alt="" style="">
										</dt>
										<dd>名字：</dd>
										<dd>类别：</dd>
										<dd>简介：</dd>
									</div>
								</dl> -->
								<div class="col-md-8 col-md-offset-4">
									<ul id='bp-element'></ul>
									<!-- <ul class="pagination pagination-md ">
                                    <li><a href="#">&laquo;</a></li>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">6</a></li>
                                    <li><a href="#">&raquo;</a></li>
                               		 </ul> -->
								</div>
							</div>

						</div>
					</div>
				</div>
				<div class="panel-footer"></div>
			</div>
		</div>
	</div>
	</div>
</body>
<script>
//给url地址增加时间戳，骗过浏览器，不读去缓存  
/* function convertURL(url){  
    var timestmp = (new Date()).valueOf();  
    //将时间戳追加到url上面  
    url = url+ "&t=" +timestmp;  
    return url;   
}   */
	/* query：回显的查询条件
	 totalPages：总页数
	 itemList：商品列表
	 page：当前页码 */

	$(function() {
		
		var element = $('#bp-element');
		options = {
			bootstrapMajorVersion : 3, //对应的bootstrap版本
			currentPage : '${page }', //当前页数，这里是用的EL表达式，获取从后台传过来的值
			numberOfPages : 10, //每页页数
			totalPages : '${totalPages }', //总页数，这里是用的EL表达式，获取从后台传过来的值
			shouldShowPage : true,//是否显示该按钮
			itemTexts : function(type, page, current) {//设置显示的样式，默认是箭头
				switch (type) {
				case "first":
					return "首页";
				case "prev":
					return "上一页";
				case "next":
					return "下一页";
				case "last":
					return "末页";
				case "page":
					return page;
				}
			},
			//点击事件
			onPageClicked : function(event, originalEvent, type, page) {
				location.href = "search.html?q=" + "${query}&page=" + page;
			}
		};
		element.bootstrapPaginator(options);
	});
	var hflag = true;
	$(".hot").click(function(){
		if(!hflag){
			$(".hot i:first").attr("class","glyphicon glyphicon-arrow-up");
			hflag = true;
		}else{
			$(".hot i:first").attr("class","glyphicon glyphicon-arrow-down");
			hflag = false;
		}
	});
</script>
</html>